body {
  margin: 0;
  padding: 0;
  background-color: #eee;
  font-family: 'Comic Sans MS', Lato, Helvetica, Tahoma, Arial, 'PingFang SC', 'Microsoft YaHei', STXihei, Heiti, SimSun, sans-serif;
  font-size: 16px;
  word-break: break-all;
  -webkit-tap-highlight-color: transparent;
}

.trc_rbox_container {
  display: none !important;
}

@font-tyzxs: 'Comic Sans MS', Lato, Helvetica, Tahoma, Arial, tyzxs;

@font-face {
  font-family: 'tyzxs';
  src: url("../assets/fonts/tyzxs.woff") format('woff'),
  url("../assets/fonts/tyzxs.ttf") format('truetype'),
  url("../assets/fonts/tyzxs.eot") format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
}

a {
  text-decoration: none;
  color: #555555;

  &:hover {
    color: #333;
  }
}

.container {
  display: flex;

  main {
    height: auto;
    width: 100%;
    margin: 10px 60px;
    overflow-x: hidden;

    .toc {
      position: fixed;
      right: 0;
      bottom: 0;
      width: 80%;
      max-width: 400px;
      height: 60vh;
      overflow-y: scroll;
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0px 0px 3px 0px #ccc;
      border-radius: 8px;

      .table-of-contents {
        padding: 0 5px;

        li {
          list-style-type: lower-roman;
        }
      }
    }

    .toc-btn {
      font-size: 1.5rem;
      position: fixed;
      right: 30px;
      bottom: 20px;
    }

    .xe-main {
      min-height: 75vh;
    }

    .article-info-image {
      max-width: 580px;
      height: auto;
      text-align: center;
      margin: 10px auto;

      img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 5px;
        box-shadow: 0px 0px 5px 0px #ccc;
      }
    }

    .queryData {
      text-align: center;
      margin-top: 10px;

      .tag, .category, .sort {
        display: inline-block;
        background-color: @sidebar-background-color;
        padding: 5px;
        margin: 5px;
        color: @sidebar-color;
        border: 1px solid #dcdddd;
        box-shadow: 0px 0px 5px 0px #ccc;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
      }

      .keyword {
        color: #9d2933;
      }
    }

    .article-title {
      text-align: center;
      color: #444;
    }

    .article-mark {
      text-align: center;
      font-size: 15px;
      color: #555;
      margin-top: -10px;
    }

    .article-info {
      font-size: 17px;
      color: #444;
      padding: 15px;
      text-align: center;
    }

    .article {
      border: 1px solid #dcdddd;
      border-radius: 5px;
      background-color: #fff;
      box-shadow: 0px 0px 5px 0px #ccc;
      margin: 15px auto;
      padding: 0 10px;
    }

    .posts {
      height: auto;
      border: 1px solid #dcdddd;
      border-radius: 5px;
      background-color: #fff;
      box-shadow: 0px 0px 5px 0px #ccc;
      padding: 0 10px 20px 10px;
      margin: 10px auto;

      strong {
        font-weight: bold;
      }

      .article-info {
        margin-top: 20px;
        text-align: unset;
      }

      .nav {
        padding: 10px;
        border-top: 1px solid #eee;
        font-size: 15px;

        .previous {
          float: left;
        }

        .next {
          text-align: right;
          float: right;
        }

        .previous, .next {
          width: 45%;

          i {
            font-size: 14px;
            width: 15px;
          }
        }
      }

      .subscribe {
        text-align: center;
        margin: 10px auto;

        button {
          width: 120px;
          height: 35px;
          background-color: #9d2933;
          border: 0;
          outline: none;
          cursor: pointer;
          color: #fff;
          box-shadow: 0px 0px 3px 0px #9d2933;
          border-radius: 8px;

          &:hover {
            box-shadow: 0px 0px 5px 0px #9d2933;
          }
        }
      }

      .tags {
        padding: 10px;
        text-align: center;

        span {
          display: inline-block;
          background-color: @sidebar-background-color;
          padding: 5px;
          margin: 5px;
          color: @sidebar-color;
          border: 1px solid #dcdddd;
          box-shadow: 0px 0px 5px 0px #ccc;
          border-radius: 8px;
          font-size: 14px;

          &:hover {
            color: @sidebar-color-hover;
            box-shadow: 0px 0px 5px 3px #ccc;
          }
        }
      }

      .copyright {
        padding: 10px;
        color: #2a2a2a;

        .post-copyright {
          margin: 10px auto;
          padding: 0.5em 1em;
          border-left: 3px solid #ff1700;
          background-color: #f9f9f9;
          list-style: none;
          font-size: 14px;
        }
      }

      .share {
        text-align: center;

        i {
          color: #000;
          font-family: 'tyzxs';
          line-height: 30px;
        }
      }
    }

    .footprint {
      font-size: 0.9rem;

      .address {
        color: #444d56;
      }

      .statistics {
        margin: 20px auto;
        text-align: center;
        color: #521e18;

        img {
          width: 2rem;
          height: 2rem;
          vertical-align: middle;
        }
      }

      .foot {
        position: fixed;
        right: 5%;
        bottom: 20%;
        padding: 5px;
        background-color: #e6e6e6;
        box-shadow: 0px 0px 3px 0px #521e18;
        border-radius: 50%;
        cursor: pointer;

        img {
          width: 2rem;
          height: 2rem;
        }

        &:hover {
          box-shadow: 0px 0px 4px 0px #521e18;
        }
      }

      .add {
      }

      .list {
        .info {
          height: auto;
          border: 1px solid #dcdddd;
          border-radius: 5px;
          background-color: #fff;
          box-shadow: 0px 0px 5px 0px #ccc;
          padding: 10px 10px;
          margin: 10px auto;
          font-size: 0.8rem;

          .top {
            width: 100%;

            .address {
              width: 90%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: cadetblue;
              float: left;
            }

            .distance {
              text-align: right;
              float: right;
              width: 10%;
              color: #66677c;
            }
          }

          .bottom {
            width: 100%;
            height: 30px;

            .date {
              float: left;
              line-height: 30px;
              color: #66677c;
            }

            .tag {
              float: right;
              margin: 2px 0;

              span {
                display: inline-block;
                background-color: #521e18;
                padding: 3px;
                color: @sidebar-color;
                border: 1px solid #dcdddd;
                box-shadow: 0px 0px 5px 0px #ccc;
                border-radius: 3px;
              }
            }
          }

          .body {
            width: 100%;
            margin-top: 20px;
            text-align: center;

            .content {
              padding: 15px 10px;
              font-size: 0.9rem;
              color: #2a2a2a;

              .by {
                color: #521e18;
                font-size: 0.8rem;
                font-weight: bold;
              }
            }

            .image {
              max-width: 53%;
              max-height: 53%;
              margin: 0 auto;
              padding-bottom: 10px;

              img {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
                border-radius: 5px;
                box-shadow: 0px 0px 5px 0px #ccc;
              }
            }
          }
        }
      }
    }
  }

  .headband {
    position: fixed;
    width: 100%;
    height: 3px;
    background-color: @sidebar-background-color;
    top: 0;
    left: 0;
    z-index: 10000;
  }

  .github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }

  .github-svg {
    fill: @sidebar-background-color;
    color: #fff;
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
  }

  @keyframes octocat-wave {
    0%, 100% {
      transform: rotate(0)
    }
    20%, 60% {
      transform: rotate(-25deg)
    }
    40%, 80% {
      transform: rotate(10deg)
    }
  }

  @media (max-width: 500px) {
    .github-corner:hover
    .octo-arm {
      animation: none
    }

    .github-corner .octo-arm {
      animation: octocat-wave 560ms ease-in-out
    }
  }

  @sidebar-background-color: #474a4d;
  @sidebar-color: #d3cbc6;
  @sidebar-color-hover: #eaf4fc;

  .sidebar {
    @sidebar-min-height: 100vh;
    @sidebar-width: 330px;

    min-height: @sidebar-min-height;
    min-width: @sidebar-width;
    color: @sidebar-color;

    .sidebar-main {
      position: fixed;
      min-height: @sidebar-min-height;
      width: @sidebar-width;
      border-right: 1px solid #ccc;
      box-shadow: 5px 0px 5px 0px #ccc;
      background-color: @sidebar-background-color; /*9ab9ceed*/
      z-index: 999;
      overflow: hidden;
    }

    .user-info {
      text-align: center;
      font-size: 14px;

      .avatar {
        width: 80px;
        height: 80px;
        margin: 20px auto;
        border-radius: 50%;
        box-shadow: 0px 0px 5px 0px #9d2933;
        overflow: hidden;
        cursor: pointer;

        img {
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }

        &:hover {
          box-shadow: 0px 0px 5px 1px #a10b18;
        }
      }

      .signature {
        font-family: @font-tyzxs;
        font-size: 1rem;
        //background-color: #59687b;
        //display: inline-block;
        //padding: 2px;
      }

      .username {
        margin-bottom: 10px;
        margin-top: -8px;

        .name {
          margin: 0 auto;
          width: fit-content;
          padding: 1px;
          background-color: #60281e;
          font-family: @font-tyzxs;
          font-weight: bolder;
          font-size: 1rem;
          color: #edd1d8;
          box-shadow: 0px 0px 2px 0px #532018;
        }
      }

      .statistics {
        @width: 75%;
        width: @width;
        padding-bottom: 30px;
        margin: 10px auto;

        ul {
          margin-top: 10px;

          li {
            list-style: none;
            float: left;
            width: @width / 3;

            .val {
              font-weight: bold;
            }
          }

          li:nth-child(2) {
            border-left: 1px solid rgba(211, 203, 198, 0.35);
            border-right: 1px solid rgba(211, 203, 198, 0.35);
          }
        }
      }
    }

    .fade-enter-active, .fade-leave-active {
      transition: opacity .3s;
    }

    .fade-enter, .fade-leave-to {
      opacity: 0;
    }

    .menu {
      margin-top: 20px;

      hr {
        width: 100%;
        border-bottom: 1px solid #949495;
      }

      .basic-line {
        height: 3px;
        background-color: @sidebar-color;
      }

      ul {
        text-align: center;
        padding: 0;
        font-size: 15px;
      }

      li {
        line-height: 30px;
        list-style: none;
        cursor: pointer;

        &:hover {
          color: @sidebar-color-hover;
        }
      }

      .selectedMenu {
        color: @sidebar-color-hover;
      }

      .search-body {
        text-align: center;
        padding-bottom: 20px;

        input {
          border: 0;
          border-bottom: 1px solid @sidebar-color;
          background-color: @sidebar-background-color;
          display: inline-block;
          height: 25px;
          margin: 0 auto;
          outline: none;
          font-size: 14px;
          color: @sidebar-color;

          &:hover {
            border-bottom: 1px solid @sidebar-color-hover;
          }
        }

        .search-btn {
          display: inline-block;
          cursor: pointer;
          vertical-align: middle;

          &:hover {
            color: @sidebar-color-hover;
          }
        }
      }
    }

    .menu-btn {
      position: absolute;
      font-size: 2rem;
      left: 20px;
      display: none;
      cursor: pointer;

      &:hover {
        color: @sidebar-color-hover;
      }
    }

    .word-count {
      margin-top: 20px;
      font-family: @font-tyzxs;
    }
  }
}